import React, { PureComponent } from 'react'
import { Checkbox, Button } from 'antd-mobile'
import Header from '../../components/Header/Header'

import "./Shop.less"
import { $pre } from '../../http/http'
import { Stepper, Manual, DemoBlock, Toast } from 'antd-mobile'
import { filterPrice } from "../../filters";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { actions, getAllChecked, getAllPrice, getList } from "../../store/modules/shop";



class Shop extends PureComponent {
    componentDidMount() {
        this.props.shop.reqList()
    }

    render() {
        let {
            list,
            allChecked,
            allPrice,
            shop: { add, sub, del, changeAll, changeOne,account },
        } = this.props;
        return (
            <div className='car'>
                <Header back title="购物车"></Header>
                {list.length == 0 ? <div>暂无数据</div> :
                
                
                    list.map((item,index) => {
                        return (
                            <div className='car_content' key={item.id}>
                            
                                
                                <div className='car_left'>
                                    <Checkbox
                                        onChange={() =>changeOne(index)}
                                        checked={item.checked}
                                        
                                    ></Checkbox>
                                    <img className='car_left_img' src={$pre + item.img} alt={item.goodsname} />
                                </div>

                                <div className='car_right'>
                                    <h1>{item.goodsname}</h1>
                                    <p>价格：{filterPrice(item.price)}元</p>
                                    <div>
                                        <Button
                                            size='mini'
                                            color='default'
                                            onClick={() => { sub(item.id, item.num) }}
                                        >-</Button>

                                        <span>{item.num}</span>

                                        <Button size='mini' color='primary'
                                            onClick={() => { add(item.id, item.num) }}
                                        >+</Button>
                                    </div>
                                    <Button color='danger' onClick={() => { del(item.id) }}>删除商品</Button>
                                </div>
                            </div>
                        )
                    })
                }
                <footer className='car_footer'>
                    <div className='car_footer_count'>
                        <Checkbox
                            disabled={list.length == 0}
                            checked={allChecked}
                            onChange={(val) => { changeAll(val) }}
                        >全选</Checkbox>
                        <span>总价：{filterPrice(allPrice)}</span>
                        {/* <span>总数：{select_num}</span> */}
                        <Button color='danger'
                            onClick={() => { this.props.history.push("/coupon") }}
                        >优惠券</Button>
                    </div>

                    <Button block
                        color='primary'
                        size='large'
                        onClick={() => {account() }}
                    >
                        点击结算
                    </Button>


                </footer>
            </div>




        )
    }
}

const mapStateToProps = (state) => {
    return {
      list: getList(state),
      allChecked:getAllChecked(state),
      allPrice:getAllPrice(state)
    };
  };
  const mapDispatchToProps = (dispatch) => {
    return {
      shop: bindActionCreators(actions, dispatch),
    };
  };
export default connect(mapStateToProps, mapDispatchToProps)(Shop);
